<template>
    <div class="main-box">
        <div class="m-swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="goods-box " v-for="(good, index) in goodsList" v-if="index < 5" :key="index">
                        <div class="goods">
                            <a :href="goodInfoUrl" @click="findGoodInfo(good.id)">
                                <div class="img-box">
                                    <img :src="$baseUrl + good.cover.slice(2)">
                                </div>
                            </a>
                            <a :href="goodInfoUrl" @click="findGoodInfo(good.id)">
                                <p class="goodsname">{{ good.name }}</p>
                            </a>
                            <p class="goods-descript">{{ good.intro }}</p>
                            <p class="goods-spec">{{ good.spec }}</p>
                            <p class="goodsprices"><del><span class="yj">&yen;
                                        <span class="yjcont">{{ good.price }}</span></span></del></p>
                            <p class="addcart" :data-id="index"><i class="iconfont icon-gouwuche3">
                                </i>加入购物车</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
import { getGoodsListByTypeId } from '@/request/goods.js'
export default {
    name: 'GoodsList',
    data() {
        return {
            goodsList:[]
        };
    },

    mounted() {
        this.getData()
    },

    methods: {
        getData(){
            getGoodsListByTypeId(this.$router.query.typeId).then(res=>{
                console.log(res.data);
                this.goodsList = res.data
            })
        }
    },
};
</script>

<style scoped></style>